<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页--问卷调查后台</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/base.css">
  <style>
    #orcode {
      width: 400px;
      height: 400px;
      box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
      text-align: center;
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
      background-color: white;
    }

    #orcode .share {
      font-weight: bold;
      font-size: 20px;
      color: #312f2d;
      display: inline-block;
      margin: 0px;
    }

    #orcode .header {
      margin-top: 84px;

    }

    #orcode .header div {
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="header">

      <ul class="layui-nav" id="nav-list">
        <li class="layui-nav-item">
          <a href="javascript:;"><img src="/img/user.png" class="layui-nav-img">我</a>
          <dl class="layui-nav-child">
            <dd><a href="/home/admin/center">个人中心</a></dd>
            <dd><a href="javascript:;" @click='destroyuser'>退出</a></dd>
          </dl>
        </li>
        <li style="width: 20px;"></li>
      </ul>

    </div>

    <!-- 左边导航栏 -->
    <div id="nav-left">
      <ul class="layui-nav layui-nav-tree layui-nav-side mynav" lay-filter="test">
        <li class="nav-title"><i><img src="/img/navimg.png" alt=""></i>问卷调查系统</li>
        <li class="btn-ncr">
          <button type="button" id="selectQuestTp" class="layui-btn layui-btn-lg layui-btn-normal">
            新建
            <i><img src="/img/create-wj.png" alt="" srcset=""></i>
          </button>
        </li>
        <li class="hr-wj"><span></span>问卷<span></span></li>
        <li class="layui-nav-item layui-this"><a href="javascript:;" @click="wjStartClick()">开启的问卷</a></li>
        <li class="layui-nav-item"><a href="javascript:;" @click="wjStopClick()">关闭的问卷</a></li>
        <li class="layui-nav-item"><a href="javascript:;" @click="wjSaveClick()">待投放的问卷</a></li>
      </ul>

    </div>

    <div id="panel-right">
      <!-- 问卷展示 -->
      <component :is='wjStr' :list='compontentData'></component>

      <!-- 底部 -->
      <!-- <footer v-show='ftActive' style="display: none;">
        <p>Copyright © 1998-2021 xxx公司 版权所有</p>
        <div>关于我们<a href="https://xiatianyu.cn"> xxx官网</a></div>
      </footer> -->
    </div>
    <!-- 问卷详细信息弹框 -->
    <component :is="wjMsg"></component>

  </div>


  <script src="/js/jquery-3.6.0.min.js"></script>
  <script src="/layui/layui.js"></script>
  <script src="/js/base.js"></script>
  <script src="/js/home.js"></script>
  <script src="/js/vue.js"></script>
  <script src="/js/axios.min.js"></script>

  <!-- 新建问卷 -->
  <script>
    layui.use('dropdown', function () {
      var dropdown = layui.dropdown
      dropdown.render({
        elem: '#selectQuestTp' //可绑定在任意元素中，此处以上述按钮为例
        , data: [{
          title: '评分问卷'
          , id: 1
          , href: '/home/createwj'
          , target: '_blank'
        }, {
          title: '普通问卷'
          , id: 2
          , href: '/home/ctcommonwj' //开启超链接
          , target: '_blank' //新窗口方式打开
        }]
      });
    });
  </script>
  <!-- 模板 -->
  <script type="text/x-template" id="mywj-content">
    <div id="panel-center">
      <ul>
        <li class="wj" v-for='item in list' :id='item.id' @click='msgClick(item.id)'>
          <div class="img-wj">
            <img src="/img/wj.jpeg" alt="">
          </div>
          <a href="javascript:;" @click.stop='findQuest(item.id)'>
            <h3>{% raw %}{{item.title}}{% endraw %}</h3>
          </a>
          <div class="explain">
            <span>{% raw %}{{item.remark}}{% endraw %}</span>
          </div>
        </li>

        <li class="fake_item"></li>
        <li class="fake_item"></li>
        <li class="fake_item"></li>
        <li class="fake_item"></li>

      </ul>
    </div>
  </script>

  <script type="text/x-template" id="mywj-msg-start">
        <div id="detail">
      <div class="wj-info">
        <ul>
          <li>
            <h2>{% raw %}{{quests.title}}{% endraw %}</h2>
            <a href="javascript:;" class="close-detail">
            </a>
          </li>
          <li>
            <div><span>问卷类型：</span></div>
            <div><span>{% raw %}{{quests.type}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>基本信息：</span></div>
            <div><span>共{% raw %}{{quests.optionCount}}{% endraw %}题</span></div>
          </li>
          <li>
            <div><span>问卷状态：</span></div>
            <div><span><span class="layui-badge-dot" style="background-color: rgb(35, 226, 35)"></span>&nbsp;{% raw %}{{quests.state===1 ? '开启':'错误'}}{% endraw %}</span>
            </div>
          </li>
          <li>
            <div><span>回收（份）：</span></div>
            <div><span>{% raw %}{{quests.writeCount}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>投放时间：</span></div>
            <div><span>{% raw %}{{quests.createTime}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>截止时间：</span></div>
            <div><span>{% raw %}{{quests.endTime===null ? '无' :quests.endTime}}{% endraw %}</span></div>
          </li>
        </ul>
      </div>

      <div style="margin: 20px 30px;">
        <hr>
      </div>

      <div class="share-url">
        <span>{% raw %}{{quests.url}}{% endraw %}</span>
      </div>
      <div class="share">
        <div><button type="button" class="layui-btn layui-btn-primary layui-border-black" @click='shareCore'>二维码</button></div>
      </div>

      <div class="wj-ico">
        <div class="statistics">
          <a href="javascript:;" @click='seeQuestRuest'>
            <div class="data-ico"></div>
            <div class="context">&nbsp;分析</div>
          </a>

        </div>

        <div class="end">
          <a href="javascript:;" @click='closeQuest'>
            <div class="end-ico"></div>
            <div class="end-title" >&nbsp;关闭</div>
          </a>
        </div>

      </div>
        <my-codeimage v-if='isshare' @close='isshare=false' :questId='quests.id'></my-codeimage>
    </div>

  </script>

  <script type="text/x-template" id="mywj-msg-stop">
        <div id="detail">
      <div class="wj-info">
        <ul>
          <li>
            <h2>{% raw %}{{quests.title}}{% endraw %}</h2>
            <a href="javascript:;" class="close-detail">
            </a>
          </li>
          <li>
            <div><span>问卷类型：</span></div>
            <div><span>{% raw %}{{quests.type}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>基本信息：</span></div>
            <div><span>共{% raw %}{{quests.optionCount}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>问卷状态：</span></div>
            <div><span><span class="layui-badge-dot" style="background-color: red"></span>&nbsp;{% raw %}{{quests.state===2 ? '关闭':'错误'}}{% endraw %}</span>
            </div>
          </li>
          <li>
            <div><span>回收（份）：</span></div>
            <div><span>{% raw %}{{quests.writeCount}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>投放时间：</span></div>
            <div><span>{% raw %}{{quests.createTime}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>结束时间：</span></div>
            <div><span>{% raw %}{{quests.endTime===null ? '无' : quests.endTime}}{% endraw %}</span></div>
          </li>
        </ul>
      </div>

      <div style="margin: 20px 30px;">
        <hr>
      </div>


      <div class="wj-ico">
        <div class="statistics">
          <a href="javascript:;" @click='seeQuestRuest'>
            <div class="data-ico"></div>
            <div class="context">&nbsp;分析</div>
          </a>

        </div>

        <div class="rm">
          <a href="javascript:;" @click='deletedQuest'>
            <div class="rm-ico"></div>
            <div class="rm-title">&nbsp;删除</div>
          </a>
        </div>

      </div>
    </div>
  </script>

  <script type="text/x-template" id="mywj-msg-save">
    <div id="detail">
      <div class="wj-info">
        <ul>
          <li>
            <h2>{% raw %}{{quests.title}}{% endraw %}</h2>
            <a href="javascript:;" class="close-detail">
            </a>

          </li>
          <li>
            <div><span>基本信息：</span></div>
            <div><span>共{% raw %}{{quests.optionCount}}{% endraw %}题</span></div>
          </li>
          <li>
            <div><span>问卷类型：</span></div>
            <div><span>{% raw %}{{quests.type}}{% endraw %}</span></div>
          </li>
          <li>
            <div><span>问卷状态：</span></div>
            <div><span><span class="layui-badge-dot" style="background-color: orange"></span>&nbsp;{% raw %}{{quests.state===3 ? '待投放':'错误'}}{% endraw %}</span>
            </div>
          </li>
          <li>
            <div><span>上次编辑时间：</span></div>
            <div><span>{% raw %}{{quests.createTime}}{% endraw %}</span></div>
          </li>
        </ul>
      </div>

      <div style="margin: 20px 30px;">
        <hr>
      </div>

      <div class="wj-ico">
        <div class="cp">
          <a href="javascript:;" @click='redactQuest(quests.id)'>
            <div class="cp-ico"></div>
            <div class="cp-title">&nbsp;编辑</div>
          </a>

        </div>

        <div class="ps">
          <a href="javascript:;" @click='issueQuest(quests.id)'>
            <div class="ps-ico"></div>
            <div class="ps-title">&nbsp;投放</div>
          </a>
        </div>

      </div>

      <ensure-wj v-model='qtActive'></ensure-wj>
    </div>
  </script>

  <script type="text/x-template" id="mywj-ensure">
    <div id="myprompt" :aa='value.isShow' :style="value.isShow ? 'display: block;' : 'display: none;'">
      <div class="prompt-centent">
          <div class="layui-inline" v-show='value.typeId===1'>
              <label class="">分数上限(必填)</label>
              <div class="layui-input-inline">
                  <input type="text" class="layui-input myinput-css max-score" placeholder="输入" v-model='maxScore'>
              </div>
          </div>
          <div>
              <div class="layui-inline">
                  <label class="">截止时间(可空)</label>
                  <div class="layui-input-inline">
                      <input type="text" @blur='timeBlur' class="layui-input" id="endtime" placeholder="yyyy-MM-dd">
                  </div>
              </div>
          </div>
          <div>
              <input type="button" class="pm-btn layui-btn layui-btn-normal" value="确定" @click='submitconfirm'>
              
          </div>
          <div>
            <input class='layui-btn layui-btn-primary layui-border-blue' type="button" value="取消" @click='cancel' style="margin-top: 10px;">
          </div>
      </div>
    </div>
  </script>

  <script type='text/x-template' id="my-codeimage">
      <div id="orcode">
        <div class="header">
          <span class="share">分享</span>
          <div @click='closeimage'><img src="/img/close.png" alt=""></div>
        </div>
        <div>
          <img :src="'/home/createimage?questId='+ questId" alt="">
        </div>
    </div>


  </script>

  <!-- 组件 -->
  <script>
    let bus = new Vue();

    Vue.component('start-content', {
      template: '#mywj-content',
      props: ['list'],
      methods: {
        msgClick: function (id) {
          let obj = this.list.filter(item => item.id === id)[0];

          bus.$emit('startMsg', obj)
        },
        findQuest: function (id) {
          location.href = `/quest/writequest/${10000 + id - 1}`
        }
      },
      mounted() {
        toplt();
      },
    });

    Vue.component('stop-content', {
      template: '#mywj-content',
      props: ['list'],
      methods: {
        msgClick: function (id) {
          console.log(id);
          let obj = this.list.filter(item => item.id === id)[0];
          console.log(obj);
          bus.$emit('stopMsg', obj)
        },
        findQuest: function (id) {
          location.href = `/quest/writequest/${10000 + id - 1}`
        }
      },
      mounted() {
        toplt();
      },
    })

    Vue.component('save-content', {
      template: '#mywj-content',
      props: ['list'],
      methods: {
        msgClick: function (id) {
          let obj = this.list.filter(item => item.id === id)[0];
          bus.$emit('saveMsg', obj)
        },
        findQuest: function (id) {
          location.href = `/quest/writequest/${10000 + id - 1}`
        }
      },
      mounted() {
        toplt();
      },
    })



    Vue.component('message-start', {
      template: '#mywj-msg-start',
      data() {
        return {
          quests: {},
          isshare: false
        }
      },
      mounted() {
        showMsg();

        bus.$on('startMsg', (data) => {
          this.quests = data
        })
      },
      methods: {
        shareCore() {
          this.isshare = true;
        },
        seeQuestRuest() {//统计
          if (this.quests.writeCount === 0) {
            layer.msg('错误!还未有人填写问卷无法查看', {
              offset: 't',
              icon: 5
            });
            return;
          }
          location.href = `/home/findquest/result/?questId=${this.quests.id}`
        },
        closeQuest() {//关闭

          axios.post('/home/closequest', {
            questId: this.quests.id
          }).then(res => {
            res = res.data
            console.log(res);
            if (res.code === 200) {
              bus.$emit('closeQuest', res.data[0])
              closeMsg();
            }
          }).catch(err => {
            console.log(err);
          })

        }
      },
      components: {
        'my-codeimage': {
          template: '#my-codeimage',
          props: ['questId'],
          methods: {
            closeimage: function () {
              this.$emit('close')
            }
          },
        }
      }
    })

    Vue.component('message-stop', {
      template: '#mywj-msg-stop',
      data() {
        return {
          quests: {}
        }
      },
      mounted() {
        showMsg();

        bus.$on('stopMsg', (data) => {
          this.quests = data
        })
      },
      methods: {
        deletedQuest() {//删除问卷

          axios.post('/home/deletedquest', {
            questId: this.quests.id
          }).then(res => {
            res = res.data
            console.log(res);
            if (res.code === 200) {
              bus.$emit('delQuest', res.data)
              closeMsg();
            } else {
              alert(res.msg);
            }
          }).catch(err => {
            console.log(err);
          })
        },
        seeQuestRuest() {//统计
          if (this.quests.writeCount === 0) {
            layer.msg('错误!还未有人填写问卷无法查看', {
              offset: 't',
              icon: 5
            });
            return;
          }
          location.href = `/home/findquest/result/?questId=${this.quests.id}`
        }
      },
    })

    Vue.component('message-save', {
      template: '#mywj-msg-save',
      data() {
        return {
          quests: {},
          qtActive: {
            id: 0,
            isShow: false,
            typeId: 1,
          },

        }
      },
      mounted() {

        showMsg();
        bus.$on('saveMsg', (data) => {
          this.quests = data;
          this.qtActive.typeId = data.typeId
        })
      },
      methods: {
        redactQuest: function (id) {//编辑
          if (this.qtActive.typeId === 1)
            location.href = '/home/editQuest/?questId=' + id;
          else if (this.qtActive.typeId === 2)
            location.href = '/home/ctcommonwj/?questId=' + id;
        },
        issueQuest: function (id) {//发布
          this.qtActive.id = id;
          this.qtActive.isShow = true
        }

      },
      components: {
        'ensure-wj': {
          template: '#mywj-ensure',
          data() {
            return {
              maxScore: '',
              endTime: null
            }
          },
          props: ['value'],
          methods: {
            timeBlur: function (el) {
              setTimeout(() => {
                this.endTime = el.target.value;
              }, 300);

            },
            submitconfirm: function () {
              if (this.value.typeId === 2) {
                if (this.endTime !== null) {
                  if (new Date(this.endTime) < new Date()) {
                    let isbl = confirm('您输入的截止日期有误，是否放弃设置并继续')
                    if (!isbl) return;
                    this.endTime = null;
                  }

                }

                this.value.isShow = false

                axios.post('/home/variation/svstquest', {
                  questId: this.value.id,
                  endTime: this.endTime
                }).then(res => {
                  res = res.data

                  if (res.code === 200) {
                    bus.$emit('delStateQuete', res.data[0])
                    closeMsg();
                  }
                }).catch(err => {
                  console.log(err);
                })
              }
              else {
                if (Number(this.maxScore).toString() !== 'NaN' && Number(this.maxScore) > 0) {

                  if (this.endTime !== null) {
                    if (new Date(this.endTime) < new Date()) {
                      let isbl = confirm('您输入的截止日期有误，是否放弃设置并继续')
                      if (!isbl) return;
                      this.endTime = null;
                    }

                  }

                  this.value.isShow = false

                  axios.post('/home/variation/svstquest', {
                    questId: this.value.id,
                    maxScore: this.maxScore,
                    endTime: this.endTime
                  }).then(res => {
                    res = res.data

                    if (res.code === 200) {
                      bus.$emit('delStateQuete', res.data[0])
                      closeMsg();
                    }
                  }).catch(err => {
                    console.log(err);
                  })

                }
                else {
                  layer.msg('错误!分数必须是整数', {
                    offset: 't',
                    icon: 5
                  });
                }
              }


              this.maxScore = '';
              this.endTime = null;

            },
            cancel: function () {

              this.value.isShow = false
            }
          },
          mounted() {
            console.log(this.value);

            layui.use('laydate', function () {
              var laydate = layui.laydate;

              //执行一个laydate实例
              laydate.render({
                elem: '#endtime' //指定元素
              });
            });
          },
        }

      }
    })


    let app = new Vue({
      el: '#app',
      data() {
        return {
          wjStr: '',
          wjMsg: '',
          ftActive: false,
          startList: [],
          stopList: [],
          saveList: []
        }
      },
      mounted() {
        axios.get('/home/quest/startlist')
          .then(res => {
            res = res.data;
            this.startList = res
            this.wjStr = 'start-content'
            this.wjMsg = 'message-start'
            this.ftActive = true
          })
          .catch(err => {
            console.log(err);
          })

        axios.get('/home/quest/stoplist')
          .then(res => {
            res = res.data;
            this.stopList = res
          })

        axios.get('/home/quest/savelist')
          .then(res => {
            res = res.data;
            this.saveList = res;
          })

        bus.$on('delStateQuete', (data) => {
          this.saveList.forEach((item, index) => {
            if (item.id === data.id) {
              this.saveList.splice(index, 1)
            }
          })

          this.startList.unshift(data)
        })

        bus.$on('closeQuest', (data) => {
          this.startList.forEach((item, index) => {
            if (item.id === data.id) {

              this.startList.splice(index, 1)
            }
          })

          this.stopList.unshift(data)
        })

        bus.$on('delQuest', (data) => {
          console.log('传来的值', data);
          this.stopList.forEach((item, index) => {
            if (item.id === data.id) {

              this.stopList.splice(index, 1)
            }
          })
        })
      },
      methods: {
        wjStartClick: function () {
          this.wjStr = 'start-content'
          this.wjMsg = 'message-start'
        },
        wjStopClick: function () {
          this.wjStr = 'stop-content'
          this.wjMsg = 'message-stop'
        },
        wjSaveClick: function () {
          this.wjStr = 'save-content'
          this.wjMsg = 'message-save'
        },
        destroyuser: function () {
          axios.get('/user/destroy')
            .then(res => {
              res = res.data
              if (res.code === 200) {
                layer.msg(res.msg, {
                  offset: 't',
                  icon: 6
                });

                setTimeout(() => {
                  location.reload()
                }, 1000);
              } else {
                layer.msg(res.msg, {
                  offset: 't',
                  icon: 5
                });
              }
            }).catch(err => {
              console.log(err);
            })
        }
      },
      computed: {
        compontentData: function () {
          let arr = []
          switch (this.wjStr) {
            case 'start-content':
              arr = this.startList
              break;
            case 'stop-content':
              arr = this.stopList
              break;
            case 'save-content':
              arr = this.saveList
            default:
              break;
          }
          return arr
        },
        startWjMsg: function () {

        }
      }
    })


  </script>
</body>

</html>